<!DOCTYPE html>
<html>
<head>
<title>智能设备</title>
<meta charset="UTF-8" />
<meta
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
	name="viewport" />
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

body {
	font-family: Helvetica;
	background-color: #f1f3f4;
}

.all {
	width: 100%;
	color: #4c4d4f;
	background-color: #f1f3f4;
}

.device_div {
	width: 100%;
	height: 70px;
	border-bottom: solid 1px #e8e8e8;
	line-height: 70px;
	background-color: #fff;
}

.device_img {
	width: 50px;
	/* height: 45px; */
	float: left;
	margin-top: 15px;
	margin-left: 13px;
}

.device_text {
	float: left;
	margin-left: 14px;
	margin-top: 1px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 55%;
}

.device_right {
	float: right;
	margin-top: 16px;
	margin-right: 8px;
	width: 40px;
}

.bottom {
	width: 100%;
	height: 180px;
	background-color: #f1f3f4;
	border-top: 1px solid #f1f3f4;
	text-align: center;
}

.adddevice {
	background-color: #ec8431;
	width: 85px;
	line-height: 30px;
	height: 30px;
	text-align: center;
	color: #fff;
	border-radius: 30px;
	margin: 30px auto 0;
}

.device_no {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: #f1f3f4;
	display: none;
}

.device_text_no {
	width: 100%;
	text-align: center;
	margin-top: 50%;
}

.device_style {
	background-color: #ec8431;
	width: 85px;
	line-height: 30px;
	height: 30px;
	text-align: center;
	color: #fff;
	border-radius: 30px;
	margin: 30px auto 0;
	position: absolute;
	left: 50%;
	margin-left: -38px;
	bottom: 50px;
}
.datalist_title{
	height:40px;
	line-height: 40px;
	text-align:left center;
	padding-left: 20px;
}
</style>
</head>

<body id="b" style="display: none;background-color: #f1f3f4;">

	<input type="hidden" id="openId" value="ouz52jiY7gfJd3vK-9K6T9mBRPuo">
	<input type="hidden" id="memberId" value="">

	<div class="datalist_title" id="private_device_title">私人设备</div>
	<div class="all" id="datalist_private">
		
	</div>
	<div class="datalist_title" id="public_device_title">公共设备</div>
	<div class="all" id="datalist_public">
		
	</div>
	<!-- 当前没有任何设备绑定 -->
	<div class="device_no" id="device_no">
		<div class="device_text_no">您当前还未绑定任何设备</div>
	</div>

</body>
<!-- 隐藏微信右上角菜单 -->
	

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="{{ URL::asset('weixin/v1/js/weixin_signature_api.js') }}"></script>

<script type="text/javascript">

//获取XmlHttpRequest对象
function createXmlHttpRequest() {
	if (window.ActiveXObject) {
		return new ActiveXObject("Microsoft.XMLHTTP");
	} else if (window.XMLHttpRequest) {
		return new XMLHttpRequest();
	}
}

//获取url后的参数值
function GetRequest() {
	   var url = location.search; //获取url中"?"符后的字串
	   var theRequest = new Object();
	  
	   if (url.indexOf("?") != -1) {
	      var str = url.substr(1);
	      strs = str.split("&");
	      for(var i = 0; i < strs.length; i ++) {
	         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
	      }
	      
	   }
	   return theRequest;
}

//获取url路径#后的参数值
function GetParam(){
	
	var Url=top.window.location.href;
	var u='',g='';
	if(Url.indexOf("#")){
		u=Url.split("#");
	}else if(Url.indexOf("?")){
		u=Url.split("?");
	}
	if (u.length==1){
		g='';
	}else{
		g=u[1]; 
	}
	
	   return g;
}
//获取项目名
var pathName=window.document.location.pathname;
var ctx=pathName.substring(0,pathName.substr(1).indexOf('/')+1);

function GetUrl(){
	 var pathName=window.document.location.pathname;
	 var projectName=pathName.substring(pathName.substr(1).indexOf('/')+1);
	var url="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx31cf436485b2fdf8&redirect_uri=http%3a%2f%2f203.195.189.85%2flifesense-healthcenter%2fwechat%2fauthx4HTML%3ft%3d"+projectName+"&response_type=code&scope=snsapi_base&state=gh_4bc17495d97a#wechat_redirect";

	return url;
}

//
function GetRequestValue(){
//	var param=new Object();
//	param = GetRequest();
	
	var xhr = createXmlHttpRequest();
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4) {
			if (xhr.status == 200) {
				var json = xhr.responseText;
					jsonData = eval( "(" + json + ")" );//转换后的JSON对象
					if(jsonData.accountId != null){
						GetMemberId(jsonData.accountId);
					}
			}
		}
	};
	var url = ctx+"/wechat/ajax_webAuthorize";
//	xhr.open("post", url + "?code=" + param["code"] +"&&state="+param["state"]+"&&scope="+param["scope"]+"&&mathNum="+Math.random(), true);
	xhr.open("post", url+"?num=1", true);
	xhr.send();
}

function GetMemberId(accountId){
	var xhr = createXmlHttpRequest();
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4) {
			if (xhr.status == 200) {
				var json = xhr.responseText;
				document.getElementById("memberId").value=json;
				//初始化数据	
				ajaxLoadData();
			}
		}
	};
	var url = ctx+"/wechat/ajax_openId";
	xhr.open("post", url + "?accountId="+accountId+"&&mathNum="+Math.random(), true);
	xhr.send();
}

//显示块
function showDOM(id){
	var dom = document.getElementById(id);
	dom && (dom.style.display = 'block');
}
//隐藏块
function hiddenDOM(id){
	var dom = document.getElementById(id);
	dom && (dom.style.display = 'none');
}

	var ctx = "";
	window.onload = function() {
		
		window.addEventListener("pageshow", function() {
			document.title = "智能设备";
			setTimeout(function() {
			}, 100);
		}, false);
		window.addEventListener("pagehide", function() {
			document.title = "";
			setTimeout(function() {
			}, 100);
		}, false);

		var param = GetRequest();
		document.getElementById("openId").value = param["openId"];
		document.getElementById("memberId").value = param["memberId"];
		wxcheckWXSignature();
		ajaxDeviceList();

	}

	function ajaxDeviceList() {
		var _memberId = document.getElementById("memberId").value;
		var _openId = document.getElementById("openId").value;
		var times = new Date().getTime();

		var xhr = createXmlHttpRequest();
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4) {
				if (xhr.status == 200) {
					var json = xhr.responseText;
					var jsonData = eval("(" + json + ")");
					document.getElementById("b").style.display = "block";

					if (jsonData != null && jsonData!="") {
						if(jsonData.privatedevice==""){
							document.getElementById("private_device_title").style.display="none";
						}else{
							initdata(jsonData.privatedevice,1);
						}
						
						if(jsonData.publicdevice==""){
							document.getElementById("public_device_title").style.display="none";
							document.getElementById("private_device_title").style.display="none";
						}else{
							initdata(jsonData.publicdevice,2);
						}
						
						//按钮位置 关闭按钮位置 后面要打开
						//init_style(jsonData.length);

					} else {//没有绑定任何设备
						//当没有设备时的背景色
						//开始添加设备时需要打卡这里
// 						document.getElementById("adddevice").className = "device_style";
						document.getElementById("datalist").style.display = "none";
						document.getElementById("device_no").style.display = "block";
					}

				}
			}
		};
		var url = "/api/ajax/getDeviceList";
		xhr.open("post", url + "?memberId=" + _memberId + "&&openId=" + _openId
				+ "&&times=" + times, true);
		xhr.send();
	}

	function initdata(jsonData,state) {
		var list = jsonData;
		//一行的模板
		var htmlTemplate = '<div class="device_div" onclick="javascript:toDetail(\'##deviceId##\',\'##deviceImg##\',\'##deviceType##\')">'
				+ '<input type="hidden" id="deviceId" value="##deviceId##"/>'
				+ '<img class="device_img" src="/weixin/v1/img/device/##deviceImg##"/>'		
				+ '<div class="device_text">##deviceName##</div>'
				+ '<img class="device_right" alt="" src="/weixin/v1/img/setting_arrow.png">'
				+ '</div>';
		var datalist = document.getElementById('datalist_private');
		if(state==1){
			datalist = document.getElementById('datalist_private');
		}else{
			datalist = document.getElementById('datalist_public');
		}
		
		var htmlStr = '';
		for (var i = 0; i < list.length; i++) {
			var data = list[i];

			//1手环 2体重秤
			var deviceType = 1;
			var deviceImg = "bonbon.png";
			var modeNum = data.modelNum;
			if (modeNum.toLowerCase().indexOf("405", 0) >= 0) {
				deviceImg = "manbo.png";
				deviceType = 1;
			} else if (modeNum.toLowerCase().indexOf("407", 0) >= 0) {
				deviceImg = "bonbon.png";
				deviceType = 1;
			} else if (modeNum.toLowerCase().indexOf("408", 0) >= 0) {
				deviceImg = "kband.png";
				deviceType = 1;
			} else if (modeNum.toLowerCase().indexOf("410", 0) >= 0) {
				deviceImg = "bonbon_c.png";
				deviceType = 1;
			} else if (modeNum.toLowerCase().indexOf("208", 0) >= 0) {
				deviceImg = "LS208_B.png";
				deviceType = 2;
			} else if (modeNum.toLowerCase().indexOf("207", 0) >= 0) {
				deviceImg = "LS207-B.png";
				deviceType = 2;
			} else if (modeNum.toLowerCase().indexOf("206", 0) >= 0) {
				deviceImg = "LS206-B.png";
				deviceType = 2;
			} else if (modeNum.toLowerCase().indexOf("202", 0) >= 0) {
				deviceImg = "ls202-B.png";
				deviceType = 2;
			} else if (modeNum.toLowerCase().indexOf("108", 0) >= 0) {
				deviceImg = "s1.png";
				deviceType = 2;
			} else if (modeNum.toLowerCase().indexOf("106", 0) >= 0) {
				deviceImg = "A3.png";
				deviceType = 2;
			}

			htmlStr += htmlTemplate.replace("##deviceName##", data.deviceName)
					.replace(/##deviceId##/g, data.id).replace(
							/##deviceImg##/g, deviceImg).replace(
							"##deviceType##", deviceType);
		}
		datalist.innerHTML = htmlStr;

	}

	//初始化数据   num表示有几个设备
	function init_style(num) {
		var bottom = document.getElementById("bottom");
		var h = document.documentElement.clientHeight - 72 * num;
		bottom.style.height = h + "px";
		if (h < 90) {
			bottom.style.height = "90px";
		}
	}

	//转跳到设备详情页面
	function toDetail(deviceId, img, deviceType) {
		var memberId = document.getElementById("memberId").value;
		var openId = document.getElementById("openId").value;
		
		window.location.href = "/page/setting/deviceDetail?deviceId="
				+ deviceId + "&&memberId=" + memberId + "&&openId=" + openId
				+ "&type=4&clear=" + new Date();
	}
	//转跳到添加设备页面
	function addDevice() {
		var memberId = document.getElementById("memberId").value;
		var openId = document.getElementById("openId").value;
		window.location.href = "/page/setting/addDevice?memberId="
				+ memberId + "&openId=" + openId + "&type=3&clear="
				+ new Date();

	}
</script>

</html>